<!--  -->
<template>
    <div class=null>
        <!--模糊查及操作-->
        <el-button style="width: 70px" type="success" @click="addProcure">新增</el-button>
        <el-button style="width: 70px;margin-left: 10px" @click="deleteParts">删除</el-button>
        <el-button style="width: 70px;margin-left: 10px" @click="">审核</el-button>
        <div style="margin-left: 1220px;margin-top: -30px">
            <el-input v-model="requisition.codeName" placeholder="请输入备件编号或备件名称" style="width: 230px">
                <i slot="append" class="el-input__icon el-icon-search" style="height: 20px;line-height: 20px;width: 10px" @click=""></i>
            </el-input>
            <i class="el-icon-menu" style="margin-left: 3px;margin-top: 3px;height: 30px;width: 30px;color: #C7CDD9" @click="showSpare = true"></i>
        </div>
        <!--表格-->
        <el-table
                :data="RequisitionList"
                @selection-change="RequisitionListSelection"
                border
                style="width: 88.2%;margin-top: 10px">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    fixed
                    align="center"
                    prop="spId"
                    label="序号"
                    width="55">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="procureCode"
                    label="采购单号"
                    width="150">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="procureTheme"
                    label="采购主题"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="procureTime"
                    label="采购日期"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="departmentManagement.departmentName"
                    label="采购部门"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="procurementPerson.peopleManagementName"
                    label="采购人员"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="procurementPerson.cellPhone"
                    label="联系方式"
                    width="130">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="supplierManagement.supplierName"
                    label="供应商"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="supplierManagement.linkman"
                    label="联系人"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="supplierManagement.contactWay"
                    label="联系方式"
                    width="130">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="procureAllnumber"
                    label="采购备件数量"
                    width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="状态"
                    width="90">
                <template slot-scope="scope">
                    <span v-if="scope.row.auditStatus === 1">待审核</span>
                    <span v-if="scope.row.auditStatus === 2">已撤回</span>
                    <span v-if="scope.row.auditStatus === 3">驳回</span>
                    <span v-if="scope.row.auditStatus === 4">待入库</span>
                    <span v-if="scope.row.auditStatus === 5">未完成</span>
                    <span v-if="scope.row.auditStatus === 6">已入库</span>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="applicant.peopleManagementName"
                    label="申请人"
                    width="90">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="updateTime"
                    label="操作时间"
                    width="150">
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
                :current-page.sync="requisition.page"
                :page-size="requisition.pagesize"
                :page-sizes="[10, 20, 30, 40]"
                :total="total"
                background
                layout="total, sizes ,prev, pager, next, jumper"
                style="padding: 30px 0; text-align: center"
                @current-change="selAllRequisition"
                @size-change="handleSizeChanges"
        />
        <!--弹出层模糊查信息-->
        <div v-if="showSpare" style="width: 700px;height: 400px;background: white;position: fixed;left: 985px;top:124px;z-index: 900;border: 1px solid #F4F4F4;border-radius: 4px">
            <el-form :model="requisition" label-width="100px" size="large" style="margin-top: 40px">
              <el-row>
                <el-col :span="12">
                    <el-form-item label="采购单号">
                        <el-input v-model="requisition.purchaseNumber" placeholder="请输入采购单号" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="采购日期">
                        <el-date-picker v-model="requisition.purchaseDate" type="date" placeholder="请选择采购日期"  style="width: 200px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="采购人员">
                        <el-select v-model="requisition.purchasePerson" placeholder="请选择采购人员"  style="width: 200px">
                            <el-option v-for="person in peopleData" :key="person.value" :label="person.label" :value="person.value" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="申请人">
                        <el-select v-model="requisition.applicant" placeholder="请选择申请人"  style="width: 200px">
                            <el-option v-for="person in peopleData" :key="person.departmentManagementId" :label="person.departmentName" :value="person.departmentManagementId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="操作时间">
                        <el-date-picker v-model="requisition.operationTime" type="date" placeholder="请选择操作时间" style="width: 200px"></el-date-picker>
                    </el-form-item>
                </el-col>
                  <el-col :span="12">
                    <el-form-item label="采购主题"  style="width: 300px">
                        <el-input v-model="requisition.purchaseTheme" placeholder="请输入采购主题"></el-input>
                    </el-form-item>
                    <el-form-item label="采购部门">
                        <el-select v-model="requisition.department" placeholder="请选择部门" style="width: 200px">
                            <el-option v-for="department in departmentData" :key="department.departmentManagementId" :label="department.departmentName" :value="department.departmentManagementId" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商">
                        <el-select v-model="requisition.supplier" placeholder="请选择供应商" style="width: 200px">
                            <el-option v-for="supplier in supplierData" :key="supplier.id" :label="supplier.supplierName" :value="supplier.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="requisition.status" placeholder="请选择状态" style="width: 200px">
                            <el-option label="待审核" value="1"></el-option>
                            <el-option label="已撤回" value="2"></el-option>
                            <el-option label="驳回" value="3"></el-option>
                            <el-option label="待入库" value="4"></el-option>
                            <el-option label="未完成" value="5"></el-option>
                            <el-option label="已入库" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                  </el-col>
              </el-row>
            </el-form>
            <div style="width: 100%;height: 50px;border-top: 1px solid #F4F4F4;margin-top: 0px">
                <el-button @click="showSpare =  false" style="margin-left: 100px">关闭</el-button>
                <el-button @click="" style="margin-top: 10px;margin-left: 20px">清空</el-button>
                <div style="margin-left: 590px;margin-top: -28px">
                    <el-button type="success" @click="selAllRequisition">查询</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    showSpare:false,
    RequisitionList:[],
    requisition:{
        page:1,
        pageSize:10,
        codeName:null,
        purchaseNumber: null,
        purchaseDate: null,
        purchasePerson: null,
        applicant: null,
        purchaseTheme: null,
        department: null,
        supplier: null,
        status: null,
        operationTime: null,
    },
    total:0,
    selection:[],
    //人员数据
    peopleData:[],
    //供应商数据
    supplierData:[],
    //部门数据
    departmentData:[]
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    deleteParts(){
        let ids = []
        debugger
        for (let i = 0; i < this.selection.length; i++) {
            if (this.selection[i].auditStatus == 1 || this.selection[i].auditStatus == 4 || this.selection[i].auditStatus == 5){
                this.$message.error('删除失败，当前审核状态不可删除');
                ids = []
                break
            }else {
                ids.push(this.selection[i].spId)
            }
        }
        if(ids.length == 0){
            this.request.post("/spare/spare-parts/deleteBatchParts")
            .then(res=>{
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.selAllRequisition()
            })
        }
    },
    //全查
    selAllRequisition(){
        this.request.post("/spare/spare-parts/selAllRequisition",this.requisition)
        .then(res=>{
            this.RequisitionList = res.data.items
            this.total = res.data.counts
        })
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
            .then(res=>{
                this.peopleData = res.data
            })
    },
    //查询部门数据
    selAllDepartment(){
      this.request.get("/system/department-management/selAllDepartment")
        .then(res=>{
            this.departmentData = res.data
        })
    },
    //查询供应商数据
    selAllSupplier(){
      this.request.get("/system/supplier-management/selAllSupplier")
        .then(res=>{
            this.supplierData = res.data
        })
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.requisition.pagesize = pageSize;
        this.selAllRequisition();
    },
    RequisitionListSelection(val){
        this.selection = val
    },
    addProcure(){
        this.$router.push('/spareProcureAdd')
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllDepartment()
    this.selAllSupplier()
    this.selAllPeople()
    this.selAllRequisition()
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>
